<template>
  <div class="hm-collect">
    <van-nav-bar class="nav-bar" title="我的收藏" fixed />
    <div v-if="list.length">
      <!-- <div class="body" v-for="item in list" :key="item.id">
        <HmTab :list="item"></HmTab>
      </div> -->
      <div
        class="body"
        v-for="item in list"
        :key="item.id"
        @click="$router.push(`/detail/${item.id}`)"
      >
        <HmTab :item="item"></HmTab>
      </div>
    </div>
    <div v-else class="no-more">没有更多了</div>
  </div>
</template>

<script>
import axios from "axios";
import Bus from "@/Bus";
import HmTab from "@/components/HmTab";
export default {
  components: { HmTab },
  data() {
    return {
      list: localStorage.getItem("collect")
        ? JSON.parse(localStorage.getItem("collect"))
        : [],
    };
  },
  created() {
    // 监听sendMsg事件  设置回调
    Bus.$on("collect", (id) => {
      if (this.list.includes(id)) {
        this.list.splice(this.list.indexOf(id), 1);
      } else {
        this.get(id);
      }
      this.get(id);
    });
  },
  methods: {
    async get(id) {
      const res = await axios({
        url: "http://interview-api-t.itheima.net/h5/interview/show",
        params: { id: id },
        headers: { Authorization: `Bearer ${localStorage.getItem("token")}` },
      });
      this.list.push(res.data.data);
      localStorage.setItem("collect", JSON.stringify(this.list));
    },
  },
};
</script>

<style lang="less" scoped>
.hm-collect {
  padding-top: 46px;
}
.no-more {
  text-align: center;
  color: #9d9799;
  margin-top: 20px;
  font-size: 14px;
}
.body {
  padding: 10px;
  border-bottom: 1px solid #adaea6;
}
</style>
